<template>
  <div style="min-height: 820px;padding-top: 10px">
      <el-card style="width: 500px;margin: 50px auto 0">
        <p style="margin:0 0 30px 0;font-size: 25px;font-weight: bold;position: relative">添加分类</p>
        <el-form :model="category" label-width="110px">
          <el-form-item label="分类名称" prop="name" style="width: 340px">
            <el-input v-model="category.name"></el-input>
          </el-form-item>
          <el-form-item label="请选择父级分类" prop="parentId">
            <el-cascader
                :options="options"
                clearable
                v-model="category.parentId"></el-cascader>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="add" style="margin-left: 90px">添加</el-button>
            </el-form-item>
        </el-form>
      </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      category:{},
      options:{
        value:0,
        label:''
      }
    }
  },
  created() {
    let url = 'http://localhost:8080/categories/get/tree'
    axios.get(url).then((response) => {
      let json = response.data
      if (json.state == 20000) {
        this.options = json.data
        for (let op of this.options){
          op.children = null
        }
      }
    })
  },
  methods: {
    add(){
      let url = 'http://localhost:8080/categories/add'
      this.category.parentId = this.category.parentId[0]
      console.log(this.category)
      axios.post(url,this.category).then((response) => {
        let json = response.data
        if (json.state == 20000) {
          this.$message.success("添加成功")
        }
      })
    }
  }
}
</script>